import react from 'react';
import { Button } from 'antd-mobile';
import { InbizIcon } from '@inbiz/utils';
import { useInbizRouter } from '@inbiz/hooks';
import styles from './index.less';

interface PropsObj {
  onClick: (event: react.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  title: string;
  operationTitle: string;
  disabled?: boolean;
}
const Top = (props: PropsObj) => {
  const history = useInbizRouter()
  return (
    <div className={styles.InbizInfomation}>
      <InbizIcon
        type="icon-ic-fanhui"
        style={{ fontSize: 18, height: 30, lineHeight: '35px' }}
        onClick={() => history.goBack()}
      />
      <span className={styles.infoTitle}>{props.title}</span>
      <Button
        color="primary"
        fill="solid"
        size="mini"
        style={{
          marginRight: '4px',
          background: 'var(--inbiz-color-primary)',
          height: 24,
          fontSize: 16,
          lineHeight: 0,
        }}
        onClick={props.onClick}
        disabled={props.disabled}
      >
        {props.operationTitle}
      </Button>
    </div>
  );
};

export default Top;
